<template>
  <div class="app-container">
    <!-- 库存查询 -->

    <el-row :gutter="24">
      <el-col :lg="24" :xs="24">
        <div class="search-bar">
          <!-- 搜索 -->
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <!-- <el-form-item label="品号" prop="productCode">
              <el-input v-noSpace
                v-model="queryParams.productCode"
                placeholder="请输入品号"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item> -->

            <!-- <el-form-item label="品名" prop="productName">
              <el-input v-noSpace
                v-model="queryParams.productName"
                placeholder="请输入品名"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item> -->

            <el-form-item label="品名" prop="productCode">
              <el-select
                v-model="queryParams.productCode"
                placeholder="请输入产品名称"
                class="!w-[192px]"
                clearable
                filterable
                @change="handleQuery"
                @visible-change="getProductName"
              >
                <el-option
                  v-for="item in productList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="全部"
                clearable
                class="!w-[100px]"
              >
                <el-option label="张签收" :value="'0'" />
                <el-option label="李签收" :value="'1'" />
                <el-option label="王签收" :value="'2'" />
              </el-select>
            </el-form-item> -->

            <el-form-item>
              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
              <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <p>
            数量合计：
            <span>{{ listTotal }}</span>
          </p>
        </div>
        <!-- 订单列表 -->
        <el-card shadow="never">
          <el-table v-loading="loading" :data="pageData">
            <el-table-column label="品号" align="center" prop="productCode" />
            <el-table-column label="品名" align="center" prop="productName" width="150" />
            <!-- <el-table-column label="单位" align="center" prop="unit" width="150" /> -->
            <el-table-column label="现有库存" align="center" prop="qty">
              <template #default="scope">
                <div>
                  {{ scope.row.qty }}
                  {{ unitFormat(scope.row.unit) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="可用库存" align="center" prop="availableQty">
              <template #default="scope">
                <div>
                  {{ scope.row.availableQty }}
                  {{ unitFormat(scope.row.unit) }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="有效库存" align="center" prop="effectiveQty">
              <template #default="scope">
                <div>
                  {{ scope.row.effectiveQty }}
                  {{ unitFormat(scope.row.unit) }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="在途数量" align="center" prop="wayQty">
              <template #default="scope">
                <div>
                  {{ scope.row.wayQty }}
                  {{ unitFormat(scope.row.unit) }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="生产占料数" align="center" prop="occupancyQty">
              <template #default="scope">
                <div>
                  {{ scope.row.occupancyQty }}
                  {{ unitFormat(scope.row.unit) }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="状态" align="center" prop="status">
              <template #default="scope">
                <span v-if="scope.row.status == '0'">{{ "张签收" }}</span>
                <span v-if="scope.row.status == '1'">{{ "李签收" }}</span>
                <span v-if="scope.row.status == '2'">{{ "王签收" }}</span>
              </template>
            </el-table-column> -->
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import stockAPI, {
  stockCheckPageQuery,
  stockCheckPageVO,
} from "@/api/warehouseManage/stockProduct";
import configApi, { ConfigType } from "@/api/config/config";
defineOptions({
  name: "User",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm);

const queryParams = reactive<stockCheckPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

const pageData = ref<stockCheckPageVO[]>();
const total = ref(0);
const listTotal = ref(0);
const loading = ref(false);

//产品列表 potato carrot beef
const productList = ref<
  {
    label: string;
    value: string;
  }[]
>([]);
const getProductName = () => {
  // configApi.getConfigListByType(ConfigType.PROD_CODE).then((res) => {
  //   productList.value = res;
  // });
  configApi.getProductList({ pageNum: 1, pageSize: 999 }).then((data) => {
    productList.value = data?.list.map((item: any) => {
      return { label: item.productName, value: item.code };
    });
  });
};

// 查询
function handleQuery() {
  loading.value = true;
  console.log("queryParams", queryParams);
  stockAPI
    .getPage(queryParams)
    .then((data) => {
      pageData.value = [...(data?.list as any)];
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

//合计

function handleTotal() {
  loading.value = true;
  console.log("queryParams", queryParams);
  stockAPI
    .getTotal(queryParams)
    .then((data) => {
      console.log("data", data);
      listTotal.value = data?.qtyTotal ?? 0;
      // pageData.value = [...(data?.list as any)];
      // total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  // queryParams.deptId = undefined;
  // queryParams.createTime = undefined;
  handleQuery();
}
// 单位常量列表
const unitOptions = ref<Array<{ label: string; value: string }>>([]);
// 获取常量列表
const getUnitList = () => {
  configApi.getConfigListByType(ConfigType.Unit).then((data) => {
    unitOptions.value = data.map((item: any) => {
      return { label: item.codeName, value: item.codeValue };
    });
  });
};
const unitFormat = (unit: any) => {
  if (!unit) return;
  let unitLabel = unitOptions.value.find((item) => item.value === unit.toLowerCase())?.label;
  return unitLabel;
};

onMounted(() => {
  handleQuery();
  handleTotal();
  getUnitList();
});
</script>

<style lang="scss" scoped>
@use "@/styles/css/public" as *;
</style>
